<!-- 游戏包编辑弹窗 -->
<template>
  <el-dialog
    :title="this.formTitle"
    :visible="visible"
    width="550px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <!-- <el-form-item label="关联游戏:" prop="game_id">
        <el-input-number
          :min="0"
          v-model="form.game_id"
          placeholder="请输入关联游戏"
          controls-position="right"
          class="ele-fluid ele-text-left"
        />
      </el-form-item> -->
      <el-form-item label="关联项目:" prop="app_id">
        <!-- <el-select
          clearable
          v-model="form.app_id"
          filterable
          style="width:100%"
          placeholder="请选择关联项目"
          @change="getGameList()"
          :disabled="isUpdate"
        >
          <el-option
            v-for="(v, i) in appList"
            :key="i"
            :value="v.id"
            :label="v.new_label"
          />
        </el-select> -->
        <PageSelect
          :placeholder="'请选择关联项目'"
          :disabled="isUpdate"
          v-model="form.app_id"
          :whereName="'app_name'"
          :url="'/app/index'"
          :optionLable="'new_label'"
          :optionvalue="'id'"
          :multiple="false"
        />
      </el-form-item>
      <el-form-item label="关联游戏:" prop="game_id">
        <el-select
          clearable
          v-model="form.game_id"
          filterable
          style="width: 100%"
          placeholder="请选择关联游戏"
          :disabled="isUpdate"
        >
          <el-option
            v-for="(v, i) in gameList"
            :key="i"
            :value="v.id"
            :label="v.new_label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属渠道:" prop="channel_id">
        <template v-if="isUpdate">
          <el-input
            :disabled="true"
            :maxlength="20"
            v-model="form.channel_name"
            :placeholder="'请选择所属渠道'"
            clearable
          />
        </template>
        <template v-else>
          <PageSelect
            :placeholder="'请选择所属渠道'"
            :disabled="isUpdate"
            v-model="form.channel_id"
            :whereName="'channel_id'"
            :url="'/channel/index'"
            :optionLable="'name'"
            :optionvalue="'id'"
            :multiple="false"
          />
        </template>
      </el-form-item>
      <!-- <el-form-item label="所属渠道:" prop="channel_id">
        <el-input-number
          :min="0"
          v-model="form.channel_id"
          placeholder="请输入所属渠道"
          controls-position="right"
          class="ele-fluid ele-text-left"
        />
      </el-form-item> -->

      <el-form-item label="游戏包名称:" prop="package_name">
        <el-input
          v-if="visibleRelevance == true"
          :maxlength="20"
          :disabled="true"
          v-model="form.relation_package_name"
          placeholder="请输入游戏包名称"
          clearable
        />
        <el-input
          v-else
          :maxlength="20"
          v-model="form.package_name"
          placeholder="请输入游戏包名称"
          clearable
        />
      </el-form-item>
      <!-- 
      <el-form-item label="icon:" prop="icon">
        <el-input
          :maxlength="20"
          v-model="form.icon"
          placeholder="请输入icon"
          clearable
        />
      </el-form-item> -->
      <el-form-item label="icon:" prop="icon">
        <!-- <el-input
          :maxlength="20"
          v-model="form.icon"
          placeholder="请输入icon"
          clearable
        /> -->
        <uploadImageFin :limit="1" v-model="form.icon"></uploadImageFin>
      </el-form-item>

      <el-form-item
        label="区别版本:"
        v-if="visibleRelevance"
        prop="sdk_version_guanlian"
      >
        <!-- 区别版本的值 -->
        <el-radio-group
          v-model="form.sdk_version_guanlian"
          :disabled="visibleRelevance == false"
          prop="sdk_version_guanlian"
        >
          <div
            v-for="item in redios"
            :key="item.id"
            style="display: inline-block"
          >
            <el-radio
              v-if="!(form.all_sdk_version.indexOf(item.key) != -1)"
              :label="item.id"
            >
              {{ item.name }}
            </el-radio>
          </div>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="区别版本:" v-else prop="sdk_version">
        <el-radio-group
          v-model="form.sdk_version"
          :disabled="visibleRelevance == false"
          prop="sdk_version"
        >
          <el-radio
            v-for="item in redios"
            :key="item.id"
            style="display: inline-block"
            :label="item.key"
          >
            {{ item.name }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.sdk_version === 2" label="下载地址:">
        <el-input
          v-model="form.appstore_url"
          placeholder="请输入下载地址"
          clearable
        />
      </el-form-item>
      <!-- <el-form-item label="区别版本1=安卓，2=苹果，3=h5:" prop="sdk_version">
        <el-input-number
          :min="0"
          v-model="form.sdk_version"
          placeholder="请输入区别版本1=安卓，2=苹果，3=h5"
          controls-position="right"
          class="ele-fluid ele-text-left"
        />
      </el-form-item> -->

      <el-form-item label="苹果appid:" prop="game_appid">
        <el-input
          :maxlength="20"
          v-model="form.game_appid"
          placeholder="请输入苹果appid"
          clearable
        />
      </el-form-item>

      <!-- <el-form-item label=":" prop="relation_package_id">
        <el-input-number
          :min="0"
          v-model="form.relation_package_id"
          placeholder="请输入"
          controls-position="right"
          class="ele-fluid ele-text-left"
        />
      </el-form-item>

      <el-form-item label="包名称:" prop="relation_package_name">
        <el-input
          :maxlength="20"
          v-model="form.relation_package_name"
          placeholder="请输入包名称"
          clearable
        />
      </el-form-item> -->

      <!-- <el-form-item label="游戏支付通知地址:" prop="pay_notify_url">
        <el-input
          :maxlength="20"
          v-model="form.pay_notify_url"
          placeholder="请输入游戏支付通知地址"
          clearable
        />
      </el-form-item> -->

      <el-form-item label="bundle_id:" prop="bundle_id">
        <el-input
          :maxlength="100"
          v-model="form.bundle_id"
          placeholder="请输入bundle_id"
          clearable
        />
      </el-form-item>
      <el-form-item label="h5游戏原链:" prop="h5_game_url">
        <el-input
          v-model="form.h5_game_url"
          placeholder="请输入h5游戏原链"
          clearable
        />
      </el-form-item>
      <el-form-item label="聚合包id:" prop="jh_id">
        <el-input
          :maxlength="20"
          v-model="form.jh_id"
          placeholder="请输入聚合包id"
          clearable
        />
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-radio-group v-model="form.status" prop="status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="默认推广员:" prop="default_promote_id">
        <PageSelect
          :placeholder="'请选择默认推广员'"
          v-model="form.default_promote_id"
          :whereName="'realname'"
          :url="'/userpromote/index?level=1,2&id=' + form.default_promote_id"
          :optionLable="'realname'"
          :optionvalue="'id'"
          :multiple="false"
        />
        <!-- <el-select
          placeholder="请选择默认推广员"
          v-model="form.default_promote_id"
          :maxlength="20"
          style="width: 100%"
        >
          <el-option
            v-for="item in defaultOptions"
            :key="item.id"
            :value="item.id"
            :label="item.realname"
          >
          </el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="结算类型:">
        <el-radio-group v-model="form.jies_type">
          <el-radio style="display: inline-block" :label="1">周结</el-radio>
          <el-radio style="display: inline-block" :label="2">日结</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="状态:1=启用 0=禁用:" prop="status">
        <el-input-number
          :min="0"
          v-model="form.status"
          placeholder="请输入状态:1=启用 0=禁用"
          controls-position="right"
          class="ele-fluid ele-text-left"
        />
      </el-form-item> -->
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading"
        >保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadImageFin from '@/components/uploadImageFin'
import PageSelect from '@/components/pageSelect/index.vue'
import redioRuleData from '@/utils/rules'
export default {
  name: 'PackageEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    visibleRelevance: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: { uploadImageFin, PageSelect },
  data() {
    return {
      // 表单数据
      form: Object.assign({ status: 1, jies_type: 1 }, this.data),
      // 表单验证规则
      rules: {},
      rules1: {
        game_id: [
          { required: true, message: '请输入关联游戏', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请输入推广渠道', trigger: 'blur' }
        ],
        package_name: [
          { required: true, message: '请输入游戏包名称', trigger: 'blur' }
        ],
        icon: [{ required: true, message: '请上传icon', trigger: 'blur' }],
        sdk_version_guanlian: [
          {
            required: true,
            message: '请选择关联区别版本',
            trigger: 'blur'
          }
        ],
        // game_appid: [
        //   { required: true, message: "请输入游戏appid", trigger: "blur" }
        // ],
        // relation_package_id: [
        //   { required: true, message: "请输入", trigger: "blur" }
        // ],
        // relation_package_name: [
        //   { required: true, message: "请输入包名称", trigger: "blur" }
        // ],
        // pay_notify_url: [
        //   { required: true, message: "请输入游戏支付通知地址", trigger: "blur" }
        // ],
        access_key: [
          { required: true, message: '请输入访问秘钥', trigger: 'blur' }
        ],
        status: [
          {
            required: true,
            message: '请输入状态:1=启用 0=禁用',
            trigger: 'blur'
          }
        ],
        default_promote_id: [
          {
            required: true,
            message: '请选择默认推广员',
            trigger: 'blur'
          }
        ]
      },
      defaultOptions: [], //默认推广员查询列表
      rules2: {
        game_id: [
          { required: true, message: '请输入关联游戏', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请输入推广渠道', trigger: 'blur' }
        ],
        package_name: [
          { required: true, message: '请输入游戏包名称', trigger: 'blur' }
        ],
        icon: [{ required: true, message: '请上传icon', trigger: 'blur' }],
        sdk_version: [
          {
            required: true,
            message: '请选择区别版本',
            trigger: 'blur'
          }
        ],
        // game_appid: [
        //   { required: true, message: "请输入游戏appid", trigger: "blur" }
        // ],
        // relation_package_id: [
        //   { required: true, message: "请输入", trigger: "blur" }
        // ],
        // relation_package_name: [
        //   { required: true, message: "请输入包名称", trigger: "blur" }
        // ],
        // pay_notify_url: [
        //   { required: true, message: "请输入游戏支付通知地址", trigger: "blur" }
        // ],
        // access_key: [
        //   { required: true, message: "请输入访问秘钥", trigger: "blur" }
        // ],
        status: [
          {
            required: true,
            message: '请输入状态:1=启用 0=禁用',
            trigger: 'blur'
          }
        ],
        default_promote_id: [
          {
            required: true,
            message: '请选择默认推广员',
            trigger: 'blur'
          }
        ]
      },
      redios: redioRuleData(),
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      formTitle: '添加游戏包',
      // formSdk_version: this.data ? this.data.sdk_version : null,
      // sdk_version_guanlian: ""
      packageId: '',
      game_id: '',
      channel_name: '',
      channel_id: '',
      relation_package_name: '',
      package_name: '',
      icon: '',
      sdk_version_guanlian: '',
      sdk_version: '',
      game_appid: '',
      bundle_id: '',
      h5_game_url: '',
      status: '',
      jh_id: '',
      default_promote_id: null,
      jies_type: '',
      save_form: {},
      appList: [],
      gameList: []
    }
  },
  watch: {
    'form.app_id'(val) {
      if (val) {
        this.getGameList()
      }
    },
    visible(val) {
      if (val) {
        // this.getAppList()
        this.getGameList()
        if (this.data) {
          if (this.data && this.visible) {
            this.form = Object.assign({}, this.data)
            // console.log(this.form.all_sdk_version, "all_sdk_version");
            this.isUpdate = true
            // this.form.sdk_version_guanlian = "";
            // this.form.sdk_version_guanlian = this.form.sdk_version;
            // console.log(this.visibleRelevance, "!!!!");
            if (this.visibleRelevance != null) {
              if (this.visibleRelevance == true) {
                this.formTitle = '关联游戏包'
                // 虽然把状态上传的值变成null，但是在下次点进修改的时候页面会有参数，值为formSdk_version
                // this.formSdk_version = this.form.sdk_version;
                // this.form.sdk_version = null;
                this.rules = this.rules1
              } else {
                this.formTitle = '修改游戏包'
                // console.log("修改！");
                // 加上这句，点完关联再点修改时就不会this.form.sdk_version = null了
                // this.form.sdk_version = this.formSdk_version;
                this.rules = this.rules2
              }
            } else {
              this.formTitle = '添加游戏包'
              this.form = { status: 1, jies_type: 1 }
              this.rules = this.rules2
            }
          } else {
            this.form = {}
            this.isUpdate = false
          }
        }
      }
    },
    // 为null时是新增 为true时是关联 为false时是修改
    visibleRelevance(val) {
      // console.log(val, "visible");
      // console.log(this.form.sdk_version,"veeeeeeeeeeee");
      if (val != null) {
        // console.log(this.visibleRelevance, "!!!!");
        if (val) {
          this.formTitle = '关联游戏包'
          // 虽然把状态上传的值变成null，但是在下次点进修改的时候页面会有参数，值为formSdk_version
          this.formSdk_version = this.form.sdk_version
          // this.form.sdk_version = null;
          this.rules = this.rules1
        } else {
          this.formTitle = '修改游戏包'
          // console.log("修改！");
          // 加上这句，点完关联再点修改时就不会this.form.sdk_version = null了
          // this.form.sdk_version = this.formSdk_version;
          this.rules = this.rules2
        }
      } else {
        // console.log(this.visibleRelevance, "!!!!");
        this.formTitle = '添加游戏包'
        this.isUpdate = false
        this.form = { status: 1, jies_type: 1 }
        this.rules = this.rules2
      }
    }
  },
  created() {
    // this.getAll()
  },
  methods: {
    //获取项目列表
    // getAppList() {
    //   this.$http.get('/app/index').then((res) => {
    //     if (res.data.code === 0) {
    //       res.data.data.forEach((item) => {
    //         item.new_label = item.app_name + '(' + item.appid + ')'
    //       })
    //       this.appList = res.data.data
    //     } else {
    //       this.$message.error(res.data.message)
    //     }
    //   })
    // },
    //获取游戏列表
    getGameList() {
      this.$http
        .get('/game/index', {
          params: {
            app_id: this.form.app_id
          }
        })
        .then((res) => {
          if (res.data.code === 0) {
            res.data.data.forEach((item) => {
              item.new_label = item.game_name + '(' + item.id + ')'
            })
            this.gameList = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
    },
    /* 获取推广员列表 */
    // getAll() {
    //   this.$http.post('/userpromote/index?level=1,2').then((res) => {
    //     if (res.data.code === 0) {
    //       this.defaultOptions = res.data.data
    //     }
    //   })
    // },
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        // console.log(this.form, "ffff");
        this.game_id = this.form.game_id
        this.channel_name = this.form.channel_name
        this.channel_id = this.form.channel_id
        this.relation_package_name = this.form.relation_package_name
        this.package_name = this.form.package_name
        this.icon = this.form.icon
        this.sdk_version_guanlian = this.form.sdk_version_guanlian
        this.sdk_version = this.form.sdk_version
        this.game_appid = this.form.game_appid
        this.bundle_id = this.form.bundle_id
        this.h5_game_url = this.form.h5_game_url
        this.status = this.form.status
        this.packageId = parseInt(this.form.id)
        this.jh_id = this.form.jh_id
        this.default_promote_id = this.form.default_promote_id
        this.jies_type = this.form.jies_type
        this.appstore_url = this.form.appstore_url

        this.save_form.id = this.packageId
        this.save_form.game_id = this.game_id
        this.save_form.channel_name = this.channel_name
        this.save_form.channel_id = this.channel_id
        this.save_form.relation_package_name = this.relation_package_name
        this.save_form.package_name = this.package_name
        this.save_form.icon = this.icon
        this.save_form.sdk_version_guanlian = this.sdk_version_guanlian
        this.save_form.sdk_version = this.sdk_version
        this.save_form.game_appid = this.game_appid
        this.save_form.bundle_id = this.bundle_id
        this.save_form.h5_game_url = this.h5_game_url
        this.save_form.status = this.status
        this.save_form.jh_id = this.jh_id
        this.save_form.default_promote_id = this.default_promote_id
        this.save_form.jies_type = this.jies_type
        this.save_form.appstore_url = this.appstore_url
        if (valid) {
          this.loading = true
          // console.log(this.visibleRelevance, "visss");
          if (this.visibleRelevance == true) {
            let RelevanceForm = this.form
            this.$delete(RelevanceForm, 'id')
            this.$delete(RelevanceForm, 'appstore_url')
            // 当关联版本和原版本值不同时
            if (this.form.sdk_version_guanlian != this.form.sdk_version) {
              RelevanceForm.sdk_version = this.form.sdk_version_guanlian
              // console.log(
              //   RelevanceForm.sdk_version,
              //   'RelevanceForm.sdk_version',
              //   this.form.sdk_version_guanlian,
              //   'this.form.sdk_version_guanlian'
              // )
            }
            RelevanceForm.package_name = RelevanceForm.relation_package_name
            this.$delete(RelevanceForm, 'relation_package_name')
            // delete RelevanceForm.relation_package_name;
            // console.log("true",RelevanceForm);
            // console.log(RelevanceForm,"dddd");
            this.$http
              .post('/package/edit', RelevanceForm)
              .then((res) => {
                this.loading = false
                if (res.data.code === 0) {
                  this.$message.success(res.data.msg)
                  if (!this.isUpdate) {
                    this.form = {}
                  }
                  this.updateVisible(false)
                  this.$emit('done')
                } else {
                  this.$message.error(res.data.msg)
                }
              })
              .catch((e) => {
                this.loading = false
                this.$message.error(e.message)
              })
          } else {
            // console.log("true", this.form);
            if (this.form.id) {
              // 修改
              this.$http
                .post('/package/edit', this.save_form)
                .then((res) => {
                  this.loading = false
                  if (res.data.code === 0) {
                    this.$message.success(res.data.msg)
                    if (!this.isUpdate) {
                      this.form = {}
                    }
                    this.updateVisible(false)
                    this.$emit('done')
                  } else {
                    this.$message.error(res.data.msg)
                  }
                })
                .catch((e) => {
                  this.loading = false
                  this.$message.error(e.message)
                })
            } else {
              delete this.form.game_name
              // 新增
              this.$http
                .post('/package/edit', this.form)
                .then((res) => {
                  this.loading = false
                  if (res.data.code === 0) {
                    this.$message.success(res.data.msg)
                    if (!this.isUpdate) {
                      this.form = {}
                    }
                    this.updateVisible(false)
                    this.$emit('done')
                  } else {
                    this.$message.error(res.data.msg)
                  }
                })
                .catch((e) => {
                  this.loading = false
                  this.$message.error(e.message)
                })
            }
          }
        } else {
          return false
        }
      })
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value)
      // console.log(this.form, "!!");
    }
  }
}
</script>

<style scoped></style>
